<template>
    <div class="home">
        <div class="home-header">
            <a-tabs hide-content justify v-model:active-key="activeKey">
                <template #extra>
                    <a-button-group type="text" style="margin-right: 7px;">
                        <a-dropdown>
                            <a-button>{{ Constant.version }}</a-button>
                            <template #content>
                                <a-doption @click="$router.push('/setting')">
                                    <template #icon> <icon-settings /> </template>
                                    全局设置
                                </a-doption>
                                <a-doption @click="$router.push('/recommend')">
                                    <template #icon> <icon-gift /> </template>
                                    推荐
                                </a-doption>
                                <a-doption @click="$router.push('/about')">
                                    <template #icon> <icon-info-circle /> </template>
                                    关于
                                </a-doption>
                            </template>
                        </a-dropdown>
                        <a-tooltip content="任务管理器">
                            <a-button type="text" @click="openTaskPanel">
                                <template #icon><icon-download /></template>
                            </a-button>
                        </a-tooltip>
                        <a-tooltip content="新增存储">
                            <a-button @click="$router.push('/storage/0')">
                                <template #icon> <icon-plus /> </template>
                            </a-button>
                        </a-tooltip>
                    </a-button-group>
                </template>
                <a-tab-pane v-for="header in headers" :title="header" :key="header" />
            </a-tabs>
        </div>
        <div class="home-container">
            <a-list>
                <a-list-item v-for="storage in storages" action-layout="vertical">
                    <a-list-item-meta>
                        <template #title>
                            <a-link @click="$router.push(`/browser/${storage.id}`)">{{ storage.name }}</a-link>
                        </template>
                        <template #avatar>
                            <icon-drag-arrow class="storage-drag" />
                        </template>
                    </a-list-item-meta>
                    <template #extra>
                        <a-tag v-if="storage.type === StorageTypeEnum.WEBDAV" color="blue">WebDAV</a-tag>
                    </template>
                    <template #actions>
                        <a-button-group size="small" type="text">
                            <a-button @click="$router.push('/storage/' + storage.id)">
                                <template #icon>
                                    <icon-edit />
                                </template>
                            </a-button>
                            <a-popconfirm content="此操作将彻底删除该存储，是否继续？" ok-text="删除" :ok-button-props="{ status: 'danger' }">
                                <a-button status="danger" style="margin-left: 7px;">
                                    <template #icon>
                                        <icon-delete />
                                    </template>
                                </a-button>
                            </a-popconfirm>
                        </a-button-group>
                    </template>
                </a-list-item>
            </a-list>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import WebStorage from '@/module/storage/entity/WebStorage';
import { webStorageService } from "@/global/BeanFactory";
import ArrayUtil from "@/utils/ArrayUtil";
import StorageTypeEnum from "@/module/storage/enumeration/StorageTypeEnum";
import { useTaskStore } from "@/module/task/store/TaskStore";
import Constant from "@/global/Constant";

export default defineComponent({
    name: 'home',
    data: () => ({
        StorageTypeEnum,
        name: '',
        activeKey: '未分组存储',
        storageMap: new Map<string, Array<WebStorage>>(),
        headers: new Array<string>(),
        Constant
    }),
    computed: {
        storages() {
            return this.storageMap.get(this.activeKey) || new Array<WebStorage>();
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            let storages = webStorageService.list();
            let storageMap = ArrayUtil.group(storages, 'group');
            if (storageMap.has("")) {
                storageMap.set("未分组存储", storageMap.get("") || []);
            }
            this.storageMap = storageMap;
            this.headers = Array.from(storageMap.keys());
            if (this.headers.length > 0) {
                this.activeKey = this.headers[0];
            }
        },
        openTaskPanel() {
            useTaskStore().openTaskPanel();
        }
    }
});
</script>
<style lang="less">
.home {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .home-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
    }

    .home-container {
        position: absolute;
        top: 47px;
        left: 7px;
        right: 7px;
        bottom: 7px;

        .arco-list-item-action {
            margin-left: 24px;
        }

        .arco-tag {
            margin-top: 17px;
        }

        .storage-drag {
            cursor: move;
        }
    }
}
</style>